{% extends "messages/base.html" %} 

{% load i18n %} 

{% block body %} 
    <h1>{% trans "Compose Message"%}</h1>
    
    <form action="" method="post">
        <table>
            {{ form.as_table }}
            <tr><td></td><td><input type="submit" value="{% trans "Send" %} &raquo;"/></td></tr>
        </table>
    </form>
{% endblock %}

{% block extra_body %}
    {{ block.super }}
    <script type="text/javascript" src="/site_media/jquery.bgiframe.js"></script>
    <script type="text/javascript" src="/site_media/jquery.dimensions.js"></script>
    <script type="text/javascript" src="/site_media/jquery.ajaxQueue.js"></script>
    <script type="text/javascript" src="/site_media/jquery.autocomplete.js"></script>
    <script type="text/javascript">
        $().ready(function() {
            $("#id_recipient").autocomplete("{% url profile_username_autocomplete %}", {
                formatItem: function(data, i, n, value) {
                    values = value.split(",,");
                    return values[0] + values[1] + "<br />" + values[2];
                },
                formatResult: function(data, value) {
                    return value.split(",,")[1];
                },
                // TODO: improve highlighting to only affect username.
                highlight: false,
            });
            $("#id_recipient").result(function() {
                $("#id_subject").focus();
            });
            $("#id_recipient").focus()
        });
    </script>
{% endblock %}